<template>
  <div class="review-page">

    <el-breadcrumb class="breadcrumb page-title" separator="/">
      <el-breadcrumb-item :to="{ path: '/' }">Reviews</el-breadcrumb-item>
    </el-breadcrumb>

    <div class="container-padding">
      <!--serchBox-->
      <div class="search-box">
        <el-form :inline="true" label-position="top" :model="searchForm" size="mini" ref="ruleForm"
                 class="demo-ruleForm main-search-box">

          <el-form-item prop="region" label="Status" style="width: 200px;margin-right: 0">
            <el-select style="width: 200px" v-model="searchForm.statusId" placeholder="">
              <el-option v-for="rg in reviewStatusOption" :key="rg.value" :label="rg.label"
                         :value="rg.value"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item prop="region" label="Restaurant Name" style="width: 200px;margin-left: 20px">
            <el-input v-model="searchForm.restaurantName" placeholder=""></el-input>
          </el-form-item>

          <el-form-item prop="region" label="Reviewer Name" style="width: 200px;margin-left: 20px">
            <el-input v-model="searchForm.reviewName" placeholder=""></el-input>
          </el-form-item>

          <el-form-item style="margin-top: 27px;margin-left: 30px;">
            <el-button @click="getList(1)">{{$t('m.Search')}}</el-button>
          </el-form-item>
        </el-form>
      </div>

      <!--list-->
      <div class="list-items-box">
        <!--表格-->
        <el-table
          :data="tableData"
          v-loading="tableLoading"
          border
          @selection-change="handleSelectionChange"
          style="width: 100%">

          <el-table-column
            prop="Property"
            label="Edit"
            align="center"
            width="100">
            <template slot-scope="scope">
              <el-button
                size="mini"
                @click="handleEdit(scope.row.id)">Edit
              </el-button>
            </template>
          </el-table-column>

          <!--ID-->
          <el-table-column
            prop="id"
            label="ID"
            align="center"
            min-width="140">
          </el-table-column>

          <!--Status-->
          <el-table-column
            prop="Property"
            label="Status"
            align="center"
            min-width="100">
            <template slot-scope="scope">
              <div class="list-notes">{{getStatusText(scope.row.status)}}</div>
            </template>
          </el-table-column>

          <!--Restaurant ID-->
          <el-table-column
            prop="restaurantId"
            label="Restaurant ID"
            align="center"
            min-width="140">
          </el-table-column>

          <!--RestaurantName-->
          <el-table-column
            prop="restaurantName"
            label="RestaurantName"
            align="center"
            min-width="140">
          </el-table-column>

          <!--Overall-->
          <el-table-column
            prop="gradeOverall"
            label="Overall"
            align="center"
            min-width="120">
          </el-table-column>

          <!--Food-->
          <el-table-column
            prop="gradeFood"
            label="Food"
            align="center"
            min-width="120">
          </el-table-column>

          <!--Ambience-->
          <el-table-column
            prop="gradeAmbience"
            label="Ambience"
            align="center"
            min-width="120">
          </el-table-column>

          <!--Service-->
          <el-table-column
            prop="gradeService"
            label="Service"
            align="center"
            min-width="120">
          </el-table-column>

          <!--Review-->
          <el-table-column
            prop="review"
            label="Review"
            align="center"
            min-width="120">
          </el-table-column>

          <!--Dish Photo-->
          <el-table-column
            prop="dishPhoto"
            label="Dish Photo"
            align="center"
            min-width="120">
          </el-table-column>

          <!--Ambience Photo-->
          <el-table-column
            prop="ambiencePhoto"
            label="Ambience Photo"
            align="center"
            min-width="140">
          </el-table-column>


          <!--Like-->
          <el-table-column
            prop="linkTotal"
            label="Like"
            align="center"
            min-width="120">
          </el-table-column>

          <!--Reviewer ID-->
          <el-table-column
            prop="reviewerId"
            label="Reviewer ID"
            align="center"
            min-width="120">
          </el-table-column>

          <!--Reviewer Name-->
          <el-table-column
            prop="reviewerName"
            label="Reviewer Name"
            align="center"
            min-width="130">
          </el-table-column>

          <!--Created Date-->
          <el-table-column
            prop="createDate"
            label="Created Date"
            align="center"
            min-width="170">
            <template slot-scope="scope">
              {{dateFormat(scope.row.createDate)}}
            </template>
          </el-table-column>


          <!--Updated Date-->
          <el-table-column
            prop=""
            label="Updated Date"
            align="center"
            min-width="140">
            <!--<template slot-scope="scope">-->
            <!--{{dateFormat(scope.row.updateDate)}}-->
            <!--</template>-->
          </el-table-column>

          <!--Status Updated By-->
          <el-table-column
            prop="updateBy"
            label="Status Updated By"
            align="center"
            min-width="150">
          </el-table-column>

          <!--Status Updated  Date-->
          <el-table-column
            prop="updateDate"
            label="Status Updated Date"
            align="center"
            min-width="170">
            <template slot-scope="scope">
              {{dateFormat(scope.row.updateDate)}}
            </template>
          </el-table-column>

          <!--Rejected reason-->
          <el-table-column
            prop="Notes"
            label="Rejected reason"
            align="center"
            min-width="140">
          </el-table-column>

          <!--Notes-->
          <el-table-column
            prop="note"
            label="Notes"
            align="center"
            min-width="120">
          </el-table-column>

          <!--Restaurant Response-->
          <el-table-column
            prop="Notes"
            label="Restaurant Response"
            align="center"
            min-width="120">
          </el-table-column>

          <!--Response Created Date-->
          <el-table-column
            prop="Notes"
            label="Response Created Date"
            align="center"
            min-width="120">
          </el-table-column>

          <!--Response Created By-->
          <el-table-column
            prop="Notes"
            label="Response Created By"
            align="center"
            min-width="120">
          </el-table-column>

          <!--Response Updated Date-->
          <el-table-column
            prop="Notes"
            label="Response Updated Date"
            align="center"
            min-width="120">
          </el-table-column>

          <!--Response Updated  By-->
          <el-table-column
            prop="Notes"
            label="Response Updated  By"
            align="center"
            min-width="120">
          </el-table-column>

        </el-table>
        <!--分页-->
        <div class="block" style="margin-top: 15px;text-align: center;">
          <el-pagination
            @size-change="handleChangeSize"
            @current-change="handleChangePage"
            :current-page="pageData.pageNo"
            :page-size="pageData.pageSize"
            :page-sizes="[10, 20, 50, 100, 500]"
            :page-count="pageInfo.totalPages"
            :total="pageInfo.totalCount"
            layout="total, prev, pager, next, jumper, sizes">
          </el-pagination>
        </div>
      </div>
    </div>

    <!--编辑user弹出层-->
    <el-dialog
      title="Edit"
      :visible.sync="userModalShowEdit"
      :before-close="userModalShowCloseEdit"
      class="new-user-dialog"
    >

      <el-form label-position="top" ref="editreview" :rules="rulesWithEmail">

        <el-form-item label="Restaurant Name">
          <el-input disabled v-model="detailModal.restaurantName"></el-input>
        </el-form-item>

        <el-form-item label="Overall">
          <el-input disabled v-model="detailModal.gradeOverall"></el-input>
        </el-form-item>

        <el-form-item label="Food">
          <el-input disabled v-model="detailModal.gradeFood"></el-input>
        </el-form-item>

        <el-form-item label="Ambience">
          <el-input disabled v-model="detailModal.gradeAmbience"></el-input>
        </el-form-item>

        <el-form-item label="Service">
          <el-input disabled v-model="detailModal.gradeService"></el-input>
        </el-form-item>

        <el-form-item label="Review">
          <el-input
            disabled
            type="textarea"
            :rows="2"
            placeholder=""
            v-model="detailModal.review">
          </el-input>
        </el-form-item>


        <el-form-item label="Dish Photo">
          <el-upload
            disabled
            class="avatar-uploader"
            action=""
            list-type="picture-card"
            :file-list="detailModal.dishPhotoImageUrl">
          </el-upload>
        </el-form-item>


        <el-form-item label="Ambience Photo">
          <el-upload
            disabled
            action=""
            list-type="picture-card"
            class="avatar-uploader"
            :file-list="detailModal.ambiencePhotoUrl"
          >
          </el-upload>
        </el-form-item>

        <el-form-item label="Like">
          <el-input disabled v-model="detailModal.likeTotal"></el-input>
        </el-form-item>

        <el-form-item label="Created Date">
          <el-input disabled v-model="detailModal.createDatetime"></el-input>
        </el-form-item>

        <el-form-item label="Updated Date">
          <el-input disabled v-model="detailModal.updateDatetime"></el-input>
        </el-form-item>

        <el-form-item label="Status By">
          <el-input disabled v-model="detailModal.moderateBy"></el-input>
        </el-form-item>

        <el-form-item label="Status Date">
          <el-input disabled v-model="detailModal.updateDatetime"></el-input>
        </el-form-item>

        <el-form-item label="Status" >
          <el-select style="width: 50%" v-model="editModal.status" placeholder="">
            <el-option v-for="rg in reviewStatusOption" :key="rg.value" :label="rg.label" :value="rg.value"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="If rejected,  select reason">
          <!--<el-select style="width: 50%" v-model="editModal.rejected" placeholder="">-->
            <!--<el-option v-for="rg in reviewRejectOption" :key="rg.value" :label="rg.label"-->
                       <!--:value="rg.value"></el-option>-->
          <!--</el-select>-->

          <el-autocomplete
            style="width: 50%"
            popper-class="my-autocomplete"
            v-model="editModal.rejected"
            :fetch-suggestions="querySearch"
            placeholder=""
            @select="">
            <i
              class="el-icon-edit el-input__icon"
              slot="suffix"
              @click="">
            </i>
            <template slot-scope="{ item }">
              <div class="name">{{ item.value }}</div>
              <span class="addr">{{ item.address }}</span>
            </template>
          </el-autocomplete>

        </el-form-item>

        <el-form-item label="Notes (internal use)">
          <el-input
            type="textarea"
            :rows="4"
            placeholder=""
            v-model="editModal.note">
          </el-input>
        </el-form-item>

      </el-form>

      <span slot="footer" class="dialog-footer">
             <el-button @click="userModalShowCloseEdit">Cancel</el-button>
             <el-button type="primary"
                        @click="handleEditSave">Save</el-button>
        </span>
    </el-dialog>
  </div>
</template>

<script>

  import qs from 'qs';
  import {reviewList, reviewDetail, reviewEdit} from '../../api/zxy_api'

  export default {
    name: 'reviews',
    data() {
      return {
        restaurants: [],
        restaurantStatusEdit: [
          {
            value: '0',
            label: 'Active'
          },
          {
            value: '1',
            label: 'Suspended'
          },
        ],
        reviewStatusOption: [
          {
            value: '1',
            label: 'Draft'
          },
          {
            value: '2',
            label: 'Pending'
          },
          {
            value: '3',
            label: 'Approved'
          },
          {
            value: '4',
            label: 'Rejected'
          },
        ],
        // 搜索子段
        searchForm: {
          statusId: '',
          restaurantName: '',
          reviewName: ''
        },
        // 详情页面字段
        detailModal: {
          dishPhotoImageUrl: [],
          ambiencePhotoUrl: [],
          restaurantName: '',
          ambiencePhoto: '',
          bookingId: '',
          createBy: '',
          createDatetime: '',
          dishPhoto: '',
          gradeAmbience: '',
          gradeFood: '',
          gradeOverall: '',
          gradeService: '',
          id: '',
          linkTotal: '',
          note: "",
          rejected: "",
          review: "",
          status: '',
          updateBy: '',
          updateDatetime: '',
        },
        editModal: {
          id: '',
          status: '',
          rejected: '',
          note: ''
        },
        pageData: {
          pageNum: 1,
          pageSize: 10
        },
        pageInfo: {
          totalCount: 0,
          totalPages: 0
        },
        tableData: [],
        rulesWithEmail: {
          email: [
            {required: true, message: 'Please enter the mailbox address', trigger: 'change'},
            {type: 'email', message: 'Please enter the correct mailbox address', trigger: 'change'}
          ],
          userName: [
            {required: true, message: 'Please enter user Name', trigger: 'change'},
          ],
          notes: [
            {required: true, message: 'Please enter user Notes', trigger: 'change'},
          ],
        },
        tableLoading: false,
        userModalShowEdit: false,
      }
    },
    computed: {
      townshipJson() {
        if (this.$store.state.localLang == 'MM') {
          return mm_townships
        } else {
          return townships
        }
      },
      regions() {
        if (this.$store.state.localLang == 'MM') {
          return mm_regions
        } else {
          return regions
        }
      },
    },
    methods: {
      getTownships(regionId) {
        let town = []
        this.townships = []
        this.searchForm.townshipId = []

        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_townships) {
            if (regionId === t.regionId) {
              town.push({value: t.value, text: t.text})
            }
          }
        } else {
          for (var t of townships) {
            if (regionId === t.regionId) {
              town.push({value: t.value, text: t.text})
            }
          }
        }
        this.townships = town
      },
      getTownshipItem(it) {
        let str = ''
        this.townshipJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getRegionItem(it) {
        let str = ''
        this.regions.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getSubType(type) {
        // 首先处理部分dom 显示隐藏

        // 初始化
        // var arrShow = [
        //   {"value": 1, "text": "Apartment", "showland": false},
        //   {"value": 2, "text": "Condo", "showland": false},
        //   {"value": 3, "text": "House", "showland": true},
        //   {"value": 4, "text": "Land", "showland": true, "showOther": true},
        //   {"value": 8, "text": "Commercial", "showland": true}
        // ]

        if (this.searchForm.propertyTypeId == 1 || this.searchForm.propertyTypeId == 2) {
          this.landSizeShow = false
        } else {
          this.landSizeShow = true
        }

        if (this.searchForm.propertyTypeId == 4) {
          this.showOther = false
        } else {
          this.showOther = true
        }

        // 将more中数据初始化
        this.moreForm = {
          totalBedrooms: [],
          masterBedroom: '',
          Bathroom: '',
          floorSizeList: [
            {minSize: '', maxSize: ''}
          ],
          landSizeList: [
            {minSize: '', maxSize: ''}
          ],
          floorLevelId: [],
          FurnishingId: [],
          BuildingAgeID: [],
          FacingID: [],
          SourceId: ''
        };

        let subType = []
        this.propertySubType = []
        this.searchForm.propertySubTypeId = []

        if (this.$store.state.localLang == 'MM') {
          for (var t of mm_propertySubType) {
            if (type === t.propertyTypeId) {
              subType.push({value: t.value, text: t.text})
            }
          }
        } else {
          for (var t of propertySubType) {
            if (type === t.propertyTypeId) {
              subType.push({value: t.value, text: t.text})
            }
          }
        }
        this.propertySubType = subType
      },
      getTransactionItem(it) {
        let str = ''
        this.transaction.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getPropertyTypeItem(it) {
        let str = ''
        this.propertyType.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      getPropertySubTypeItem(it) {
        let str = ''
        this.propertySubTypeJson.forEach((item) => {
          if (item.value == it) {
            str = item.text || ''
          }
        })
        return str
      },
      handleSelectionChange(val) {
        this.multipleSelection = val
        // [{row当前所有数据，developmentId}]
      },
      handleChangeSize(val) {
        this.pageData.pageSize = parseInt(val)
        this.pageData.pageNum = 1
        this.getList()
      },
      handleChangePage(val) {
        this.pageData.pageNum = val
        this.getList()
      },
      dateFormat(value, str) {
        var date = new Date(value)
        var Y = date.getFullYear()
        var m = date.getMonth() + 1
        var d = date.getDate()
        var H = date.getHours()
        var i = date.getMinutes()
        var s = date.getSeconds()
        if (m < 10) {
          m = '0' + m
        }
        if (d < 10) {
          d = '0' + d
        }
        if (H < 10) {
          H = '0' + H
        }
        if (i < 10) {
          i = '0' + i
        }
        if (s < 10) {
          s = '0' + s
        }
        if (str == 'listedDate') {
          var t = d + '-' + m + '-' + Y + '  ' + H + ':' + i + ':' + s
          return t
        } else {
          // var ts = m + '-' + Y
          // return ts
          var ts = Y + '-' + m + '-' + d + '  ' + H + ':' + i + ':' + s
          return ts
        }
      },
      userModalShowCloseEdit() {
        this.userModalShowEdit = false;
        this.$refs['editreview'].resetFields();
      },
      getStatusText(id) {
        for (var t of this.reviewStatusOption) {
          if (id == t.value) {
            return t.label;
          }
        }
      },
      // 编辑请求详情数据reviews
      handleEdit(id) {
        //  首先请求详情数据
        this.userModalShowEdit = true;

        reviewDetail(id).then((res) => {

          let data = res.data.info

          this.detailModal = {
            dishPhotoImageUrl: res.data.dishPhoto || [],
            ambiencePhotoUrl: res.data.ambiencePhoto || [],
            restaurantName: data.restaurantName,
            ambiencePhoto: data.ambiencePhoto,
            bookingId: data.bookingId,
            createBy: data.createBy,
            createDatetime: this.dateFormat(data.createDate),
            dishPhoto: data.dishPhoto,
            gradeAmbience: data.gradeAmbience,
            gradeFood: data.gradeFood,
            gradeOverall: data.gradeOverall,
            gradeService: data.gradeService,
            id: data.id,
            likeTotal: data.likeTotal,
            note: data.note,
            rejected: data.rejected,
            review: data.review,
            status: data.status,
            moderateBy: data.moderateBy,
            updateDatetime: this.dateFormat(data.updateDate)
          }

          this.editModal.id = data.id || '';
          this.editModal.status = '' + data.status || '';
          this.editModal.rejected = '' + data.rejected || '';
          this.editModal.note = data.note || '';

        }).catch((e) => {
          console.log(e)
        })

      },
      // 编辑保存
      handleEditSave(){

        var formData = {
          id: this.editModal.id,
          status:this.editModal.status,
          rejected: this.editModal.rejected || '',
          note: this.editModal.note || ''
        }

        formData = qs.stringify(formData)

        reviewEdit(formData).then((res) => {

          if(res.data.errorID == 0){
            this.userModalShowCloseEdit();
            this.getList(1);
          }

        }).catch((e) => {
          console.log(e)
        })

      },
      getList(pageNum) {

        if (pageNum == 1) {
          this.pageData.pageNum = 1;
        }

        console.log(this.searchForm, '搜索相关的字段')

        let searchForm = {
          status: this.searchForm.statusId,
          restaurantName: this.searchForm.restaurantName,
          reviewerName: this.searchForm.reviewName,
        };

        // searchForm = qs.stringify(searchForm)

        reviewList(Object.assign(searchForm, this.pageData)).then((res) => {

          this.tableData = res.data.list || []
          // 分页信息配置
          this.pageInfo.totalPages = res.data.pages
          this.pageInfo.totalCount = res.data.total

        }).catch((e) => {
          console.log(e)
        })
      },
      // 预制模板
      querySearch(queryString, cb) {
        var restaurants = this.restaurants;
        var results = queryString ? restaurants.filter(this.createFilter(queryString)) : restaurants;
        // 调用 callback 返回建议列表的数据
        cb(results);
      },
      createFilter(queryString) {
        return (restaurant) => {
          return (restaurant.value.toLowerCase().indexOf(queryString.toLowerCase()) === 0);
        };
      },
      loadAll() {
        return [
          { value: "Advertisemenet/copied from others/useless information", address: "Advertisemenet/copied from others/useless information" },
          { value: "Personal attack/Malicious remarks", address: "Personal attack/Malicious remarks" },
          { value: "Against the law", address: "Against the law" },
        ];
      },
    },
    mounted() {
      this.restaurants = this.loadAll();
      this.getList()
    }
  }
</script>


<style>
  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px !important;
  }

  .breadcrumb {
    margin-bottom: 20px;
  }

  .page-title {
    padding: 20px 40px;
    border-bottom: 1px solid #e6e6e6;
    font-size: 20px;
  }

  .search-box {
    position: relative;
    /*padding-top: 20px;*/
    border-bottom: 1px solid #eee;
  }

  .line-form {
    border-top: 1px solid #eee;
  }

  .more-box, .list-items-box {
    padding-top: 20px;
    padding-bottom: 10px;
  }

  .list-items-box {
    /*margin-right: 10%;*/
  }

  .list-items-box .el-form--inline.el-form--label-top .el-form-item__content {
    display: inline-block;
  }

  .change-status {
    font-size: 14px;
    margin-right: 10px;
  }

  .options {
    padding: 0px 0 20px 0;
  }

  .container-padding {
    padding: 0 40px;
  }

  .list-notes {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
  }

  .new-user-dialog .el-form-item {
    margin-bottom: 0 !important;
  }

  .review-page .el-form--label-top .el-form-item__label {
    padding: 0 !important;
  }

  /*照片样式*/
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }

  .review-page .el-upload-list__item-status-label {
    display: none !important;
  }

  .review-page .el-upload--picture-card {
    display: none !important;
  }


  .my-autocomplete li {
    line-height: normal;
    padding: 7px;
  }

  .name {
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .addr {
    font-size: 12px;
    color: #b4b4b4;
  }

  .highlighted .addr {
    color: #ddd;
  }

</style>
